import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path-browserify'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
//setup name
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
import { createStyleImportPlugin, VxeTableResolve } from 'vite-plugin-style-import'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        VueSetupExtend(),
        AutoImport({
            resolvers: [ElementPlusResolver()]
        }),
        Components({
            resolvers: [ElementPlusResolver()]
        }),
        createStyleImportPlugin({
            resolves: [VxeTableResolve()]
        })
    ],
    css: {
        // css预处理器
        preprocessorOptions: {
            scss: {
                // 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了
                // 给导入的路径最后加上 ;
                additionalData: '@use "./src/assets/scss/variable.scss" as *;'
            }
        }
    },
    envDir: './env',
    ssr: false,
    base: '/',
    outDir: 'dist',
    resolve: {
        extensions: ['.js', '.vue', '.json', '.jsx', '.mjs'],
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
            '@': path.resolve(__dirname, 'src'),
            '@components': path.resolve(__dirname, '/src/components'),
            '@views': path.resolve(__dirname, '/src/views'),
            '@utils': path.resolve(__dirname, '/src/utils'),
            '@store': path.resolve(__dirname, '/src/store'),
            '@hooks': path.resolve(__dirname, '/src/hooks'),
            '@router': path.resolve(__dirname, '/src/router'),
            '@image': path.resolve(__dirname, '/src/assets/image'),
            '@config': path.resolve(__dirname, '/src/utils/config'),
            path: 'path-browserify'
        }
    },

    server: {
        host: '0.0.0.0',
        port: 8888,
        open: true
    },
    build: {
        sourcemap: false,
        target: 'es2020'
    },
    optimizedeps: {
        esbuildoptions: {
            target: 'es2020'
        }
    }
})
